<template>
  <div style="padding-top:2rem;font-size:0.4rem;">

    <div>
      <TopNav title="BindAccountPage.zhbd" show_left="true"></TopNav>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="6"style="margin-bottom:0.5rem;">
          {{ $t('BindAccountPage.zhlx') }}:
        </nut-col>
        <nut-col :span="18"style="margin-bottom:0.5rem;text-align: left">
          <nut-radiogroup  v-model="select_type">
            <div style="margin-bottom:0.3rem;">
              <!--nut-radio label=0>{{ $t('BindAccountPage.wx') }}</nut-radio-->
              <nut-radio label=1>{{ $t('BindAccountPage.dy') }}</nut-radio>
<!--              <nut-radio label=2 disabled>{{ $t('BindAccountPage.hs') }}</nut-radio>-->
            </div>
<!--            <div>-->
<!--              <nut-radio label=3 disabled>{{ $t('BindAccountPage.ws') }}</nut-radio>-->
<!--              <nut-radio label=4 disabled>{{ $t('BindAccountPage.ks') }}</nut-radio>-->
<!--            </div>-->
          </nut-radiogroup>
        </nut-col>
      </nut-row>
      <li v-if="loading">
        <div style="text-align: center;">
          <van-loading/>
        </div>
      </li>
      <div v-if="select_type==1">
        <div v-if="data.status==1">
          <div @click="handleClickUnbind" class="unbind">
            {{ $t('BindAccountPage.jcbd') }}
          </div>
          <div class="bind-info-douyin">
            <img style="max-width: 70%;" :src="data.bind_info.imgs" alt="">
          </div>

<!--          <ul v-if="data.bind_info" class="bind-info">-->
<!--            <div class="bg"></div>-->
<!--            <li style="text-align: center">-->
<!--              <img :src="data.bind_info.avatar_168x168.url_list[0]" alt="">-->
<!--            </li>-->
<!--            <li>{{data.bind_info.nickname}}</li>-->
<!--            <li style="border-bottom:thin solid #fff;margin-bottom:0.5rem;padding-bottom:0.5rem;">{{ $t('BindAccountPage.dyh') }}: {{data.bind_info.short_id}}-->
<!--              <span class="refresh" @click="handleClickRefresh">-->
<!--                <span v-if="loadingBind">{{ $t('BindAccountPage.zzsx') }}...</span>-->
<!--                <span v-else>{{ $t('BindAccountPage.sx') }}</span>-->
<!--              </span>-->
<!--            </li>-->
<!--            <li>UID: {{data.bind_info.uid}}</li>-->
<!--            <li v-if="data.bind_info.signature">{{ $t('BindAccountPage.qm') }}: {{data.bind_info.siganture}}</li>-->
<!--            <li>{{ $t('BindAccountPage.gj') }}: {{data.bind_info.country}}</li>-->
<!--            <li class="stat-info">-->
<!--              <ul>-->
<!--                <li>-->
<!--                  <div><span>{{data.bind_info.total_favorited}}</span>{{ $t('BindAccountPage.hz') }}</div>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <div><span>{{data.bind_info.following_count}}{{ $t('BindAccountPage.gz') }}</span></div>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <div><span>{{data.bind_info.follower_count}}{{ $t('BindAccountPage.fs') }}</span></div>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </li>-->
<!--          </ul>-->
        </div>
        <div v-else>
          <div style="text-align:left;font-size:0.4rem;padding:0.2rem;">
            <span>{{ $t('BindAccountPage.czsm') }}: </span>
            <span @click="handleClickViewHelp" style="color:orange;font-weight: bold;cursor: pointer;">{{ $t('BindAccountPage.ckjc') }}</span>
          </div>
<!--          <nut-row type="flex" gutter="10" align="left">-->
<!--            <nut-col :span="24" style="margin-bottom:0.5rem;">-->
<!--              <div style="text-align: center;">-->
<!--                <nut-textinput-->
<!--                  v-model="data.username"-->
<!--                  label="$t('BindAccountPage.zhmc')："-->
<!--                  placeholder="$t('BindAccountPage.qsrnr')"-->
<!--                  :clearBtn="false"-->
<!--                  :disabled="false"-->
<!--                  :readonly="data.status == 0 || data.status == 1"-->
<!--                />-->
<!--              </div>-->
<!--            </nut-col>-->
<!--          </nut-row>-->
<!--          <div style="text-align:left;font-size:0.4rem;padding:0.2rem;">-->
<!--            <span>{{ $t('BindAccountPage.zhjt') }}: </span>-->
<!--            <span>{{ $t('BindAccountPage.r') }}:{{ $t('BindAccountPage.dyqdjw') }},{{ $t('BindAccountPage.dkykddyhdjmhjxjt') }}</span>-->
<!--          </div>-->
          <nut-row type="flex" gutter="10" align="left">
            <nut-col :span="6"style="margin-bottom:0.5rem;text-align: left;width:25%;">
              {{ $t('BindAccountPage.tjjt') }}:
            </nut-col>
            <nut-col :span="18"style="margin-bottom:0.5rem;text-align: left;">
              <div v-if="data.img_arr.length>0">
                <img @click="handleClickReview($api_url.server+item)" class="row-img" :src="$api_url.server+item" alt=""
                     v-for="item in data.img_arr"
                >
              </div>
              <nut-imagepicker
                v-if="data.status != 0 & data.status != 1"
                @imgMsg="uploadImgs"
                :width="60"
                :height="60"
                :max="3"
                :img-list.sync="imgList"
              >
              </nut-imagepicker>
            </nut-col>
          </nut-row>
          <nut-row type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;">
              <div v-if="data.status < 0">
                <button :disabled="loading"  @click="handleClickSave" class="btn">{{ $t('BindAccountPage.tj') }}</button>
              </div>
              <div v-else-if="data.status == 0">
                <div style="margin-bottom:0.2rem;"><img src="/static/img/wait.png" alt=""></div>
                {{ $t('BindAccountPage.ddsh') }}...
<!--                <div>-->
<!--                  {{ $t('BindAccountPage.whjshtddyj') }} {{ $t('BindAccountPage.ktj') }}-->
<!--                  <div style="margin:0.2rem 0;">-->
<!--                    QQ：43037004 <span id="btn-qq" @click="copyHere" data-clipboard-action="copy" data-clipboard-text="43037004">$t('BindAccountPage.fz')QQ</span>-->
<!--                  </div>-->
<!--                  <div>{{ $t('BindAccountPage.hdtqshdqx') }}</div>-->
<!--                </div>-->
              </div>
              <div v-else-if="data.status == 1">
                <div style="margin-bottom:0.2rem;"><img src="/static/img/pass.png" alt=""></div>
                {{ $t('BindAccountPage.shtg') }}
              </div>
              <div v-if="data.status == -1" class="verify-fail">
                <div style="margin-bottom:0.2rem;"><img src="/static/img/fail.png" alt=""></div>
                <div style="color:red;">{{data.reply}}</div>
              </div>
            </nut-col>
          </nut-row>
          <!-- <nut-row v-if="wechat" type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;font-weight: bold;font-size:0.4rem;text-align: left;">
              <div>
                <ul>
                  <li>{{ $t('BindAccountPage.yyshrsjdyjxy') }}60{{ $t('BindAccountPage.fzzy') }}</li>
                  <li>$t('BindAccountPage.djtjwx'): <span id="btn-qq" @click="copyHere" data-clipboard-action="copy" :data-clipboard-text="wechat">{{wechat}}</span></li>
                  <li>{{ $t('BindAccountPage.jkshjd') }}</li>
                </ul>
              </div>
            </nut-col>
           </nut-row>  -->
          <nut-row  type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;text-align: left;">
              <div v-html='bind_account_tips'>
                
              </div>
            </nut-col>
          </nut-row>
        </div>
      </div>
      <div v-if="select_type==0">
        <div v-if="data.status==1">
          <div @click="handleClickUnbind" class="unbind" v-if="data.bind_info">
            {{ $t('BindAccountPage.jcbd') }}
          </div>
          <ul v-if="data.bind_info" class="bind-info">
            <div class="bg"></div>
            <li v-if="data.bind_info.small_head" style="text-align: center">
              <img :src="data.bind_info.small_head" alt="">
            </li>
            <li>{{ $t('BindAccountPage.zh') }}: {{data.username}}</li>
            <li>{{ $t('BindAccountPage.c') }}: {{data.bind_info.nick_name}}</li>
            <li>{{ $t('BindAccountPage.wxh') }}: {{data.bind_info.alias}}</li>
            <li>wxid: {{data.bind_info.login_name}}</li>
            <li>$t('BindAccountPage.xb'):{{data.bind_info.sex == 1?$t('BindAccountPage.n'):data.bind_info.sex==2?$t('BindAccountPage.n'):$t('BindAccountPage.wsz')}} </li>
            <li>{{ $t('BindAccountPage.qm') }}: {{data.bind_info.signature}}</li>
            <li>{{data.bind_info.country}} {{data.bind_info.provincia}} {{data.bind_info.city}}</li>
            <li>{{ $t('BindAccountPage.wxdj') }}: <nut-rate v-model="data.bind_info.wx_grade" :readOnly="true"></nut-rate></li>
          </ul>
        </div>
        <div v-else>
          <nut-row type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;">
              <div style="text-align: center;">
                <nut-textinput
                  v-model="wx.account"
                  label="微信账号："
                  placeholder="请输入内容"
                  :clearBtn="false"
                  :disabled="false"
                  :readonly="data.status == 1"
                />
              </div>
            </nut-col>
          </nut-row>
          <nut-row v-show="count_down>0" type="flex" gutter="10" align="left">
            <nut-col :span="6"style="margin-bottom:0.5rem;text-align: left">
              扫二维码:
            </nut-col>
            <nut-col :span="18"style="text-align: left">
              <img :style="{background:count_down==0?'red':'#fff'}" class="show-qrcode" :src="$api_url.server+qrcode" alt="">
              <div style="margin-top:0.2rem;">
                二维码在<b>{{count_down}}</b>秒后过期
              </div>
            </nut-col>
          </nut-row>
          <nut-row type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;">
              <div v-if="data.status != 1">
                <button :disabled="loading"  @click="handleClickBindWx" class="btn">提交</button>
              </div>
              <div v-else>
                <div style="margin-bottom:0.2rem;"><img src="/static/img/pass.png" alt=""></div>
                已绑定
              </div>
            </nut-col>
          </nut-row>
          <nut-row v-if="loading && wait_s>0" type="flex" gutter="10" align="left">
            <nut-col :span="24" style="margin-bottom:0.5rem;">
              <nut-progress
                :percentage="Math.ceil((1-wait_s/60)*100)"
                stroke-color="pink"
                stroke-width="20"
              >
              </nut-progress>
            </nut-col>
          </nut-row>
        </div>
      </div>
      <nut-actionsheet :is-visible="showImgReview"
                       @close="handleClickCloseReview"
      >
        <div slot="custom" class="custom-wrap">
          <div class="img-review" v-if="curr_img">
            <img :src="curr_img" alt="">
          </div>
        </div>
      </nut-actionsheet>
      <nut-popup :overlay="false" style="height:90%;" position="bottom" closeable close-icon="cross" v-model="showHelpView">
        <div style="padding-top:1.3rem;height:100%;">
          <iframe  :src="help_url" width="100%" height="100%" frameborder="0"></iframe>
        </div>
      </nut-popup>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import helper from "../utils/helper";


export default {
  name: 'BindAccountPage',
    components: {
      MainNav,
      TopNav,
    },
    data () {
    return {
        loading:false,
        curr_img:'',
        showImgReview:false,
        select_type:"1",
        data:{
          username:'',
          img_arr:[],
          status:-2,
          bind_info:''
        },
        user:{},
        imgList:[],
        helpText:[
            this.$t("BindAccountPage.qtxyhm"),
			this.$t("BindAccountPage.dkdydjw")+this.$t("BindAccountPage.djysjxzgrmp")+this.$t("BindAccountPage.djysjxzfzlj")+this.$t("BindAccountPage.ztdzhmc"),
            this.$t("BindAccountPage.qtxyhm"),
            this.$t("BindAccountPage.qtxyhm"),
            this.$t("BindAccountPage.qtxyhm")
        ],
        loadingBind:false,
        showHelpView: false,
        help_url: '',
        count_down: 0,
        qrcode:'',
        wx:{
            account: '',
            token:'',
            user_id: '',
            plan_id: '',
        },
        loadingData:'',
        wait_s: 60,
        wechat: '',
        bind_account_tips:'',
    }
  },
    methods:{
        shiftTab(index){

        },
        uploadImgs(args){
            console.log(args,this.imgList);
            this.data.imgs = args.msg;
        },
        handleClickRefresh(){
            this.loadingBind = true;
            this.$axios.post(this.$api_url.bind_refresh,{
                type:this.select_type
            }).then((res)=>{
                let data = res.data;
                if(data.code == 0){
                    this.getData();
                    this.$toast.success(data.msg);
                } else{
                    this.$toast.fail(data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                this.loadingBind=false;
            })
        },
        handleClickSave(){
            if(this.imgList.length > 0){
                this.loading = true;
                let param = new FormData();
                //param.append("username",this.data.username);
                param.append("type",this.select_type);
                let imgArr = [];
                for(let i = 0; i < this.imgList.length; i++){
                    imgArr.push(this.imgList[i].src);
                }
                if(imgArr.length>0){
                    param.append("imgs",imgArr.join("<<XXOOXX>>"));
                }
                let loading = this.$toast.loading();
                this.$axios.post(this.$api_url.bind_account,param).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    this.loading = false;
                    loading.hide();
                })
            } else{
                this.$toast.warn(this.$t("BindAccountPage.qtjjt"));
            }
        },
        handleClickTest(){
            console.log(this.$refs.recaptcha);
        },
        copyHere(){
            let clipboard = new this.$clipboard("#btn-qq");
            clipboard.on('success', ()=> {
                this.$toast.success(this.$t("BindAccountPage.fzcg")+this.$t("BindAccountPage.zzdkwx"));
                setTimeout(()=>{
                    try{
                        let args = {
                            type:'open_wechat',
                            data:''
                        };
                        Ak.postMessage(JSON.stringify(args));
                    } catch (e) {
                        location.href="weixin://";
                    }
                },3000);

            });
            clipboard.on('error', ()=> {
                this.$toast.fail("复制失败");
            });
        },
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.bind_record+"?type="+this.select_type).then((res)=>{
                let data = res.data;
                if(data){
                    this.data.bind_info = data;
                    this.data.username = data.username;
                    this.user = data.user;
                    if(data.imgs){
                        this.data.img_arr = data.imgs.split(",");
                    }
                    this.data.status = data.status;
                    this.data.reply = data.reply;
                } else {
                    this.data.status = -2;
                    this.data.img_arr = [];
                    this.data.username = "";
                    this.data.bind_info = "";
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
        getData2(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.get_daichong_kf).then((res)=>{
                //this.data2 = res.data;
                if(res.data.bind_account['value']){
                  this.bind_account_tips = res.data.bind_account['value']
                }
                
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
            })
        },
        getServer(){
            this.$axios.get(this.$api_url.wx_server).then((res)=>{
                let data = res.data;
               this.wechat = data;
            })
        },
        handleClickReview(url){
            this.curr_img = url;
            this.showImgReview = true;
        },
        handleClickViewHelp(){
            this.showHelpView = true;
        },
        handleClickCloseReview(){
            this.showImgReview = false;
        },
        handleClickBindWx(){
            if(!this.wx.account){
                this.$toast(this.$t("BindAccountPage.qsrwxzh"));
                return;
            }
            this.loading = true;
            this.$axios.post(this.$api_url.wx_bind,this.$qs.stringify({
                account:this.wx.account,
            })).then((res)=>{
                if(res.data.code === 0){
                    let data = res.data.data;
                    this.wx.token = data.token;
                    this.wx.user_id = data.user_id;
                    this.wx.plan_id = data.plan_id;
                    this.$toast.warn(this.$t("BindAccountPage.zzhqewm"));
                    this.checkQrcode();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            });
        },
        handleClickUnbind(){
            let __this = this;
            this.$dialog({
                title: "确定解绑吗?",
                onOkBtn(event) {  //确定按钮点击事件
                    this.close(); //关闭对话框
                    let loading = this.$toast.loading();
                    __this.$axios.post(this.$api_url.unbind_account,__this.$qs.stringify({
                        type: __this.select_type
                    })).then((res)=>{
                        if(res.data.code === 0){
                            __this.$toast.success(res.data.msg);
                            __this.getData();
                        } else{
                            __this.$toast.fail(res.data.msg);
                        }
                    }).catch((err)=>{
                        __this.$toast.fail(err.message);
                    }).then(()=>{
                        loading.hide();
                    })
                },
            });
        },
        callback_captcha(val){
            alert(val);
        },
        initTimer(){
            let timer = setInterval(()=>{
                if(this.count_down > 0){
                    this.count_down--;
                } else{
                    this.loadingData.hide();x
                    clearInterval(timer);
                }
            },1000);
        },
        checkQrcode(){
            this.wait_s = 60;
            this.loadingData = this.$toast.loading(this.$t("BindAccountPage.zzhq")+"...");
            this.checkQrcodeSub();
        },
        checkQrcodeSub(){
            if(this.wait_s<=0){
                this.loadingData.hide();
                this.$toast.fail(this.$t("BindAccountPage.czcs")+"!");
                return;
            }
            this.$axios.post(this.$api_url.wx_get_qrcode,this.$qs.stringify({
                user_id: this.wx.user_id,
                plan_id: this.wx.plan_id,
                token: this.wx.token
            })).then((res)=>{
                let data = res.data;
                if(data.code == 0){
                    this.count_down = data.data.expire;
                    this.qrcode = data.data.qrcode;
                    this.initTimer();
                    this.loadingData.hide();
                    this.$toast.warn(this.$t("BindAccountPage.qdkwxsmewm"));
                    this.checkQrcodeOk();
                } else{
                    this.wait_s--;
                    setTimeout(()=>{
                        this.checkQrcodeSub();
                    },2000);
                }
            }).catch((err)=>{
               this.$toast.fail(err.toString());
            });
        },
        checkQrcodeOk(){
            this.wait_s = 60;
            this.checkQrcodeOkSub();
        },
        checkQrcodeOkSub(){
            if(this.wait_s<=0){
                this.loadingData.hide();
                this.$toast.fail(this.$t("BindAccountPage.czcs")+"!");
                return;
            }
            this.$axios.post(this.$api_url.wx_get_wx_info,this.$qs.stringify({
                user_id: this.wx.user_id,
                token: this.wx.token
            })).then((res)=>{
                let data = res.data;
                if(data.code == 0){
                    this.$toast.success(this.$t("BindAccountPage.bdcg")+'!');
                    this.getData();
                    this.loading = false;
                } else{
                    this.wait_s--;
                    setTimeout(()=>{
                        this.checkQrcodeOkSub()
                    },2000)
                }
            }).catch((err)=>{
                this.$toast.fail(err.toString())
            })
        }
    },
    watch:{
      select_type(val){
          this.getData();
      }
    },
    mounted() {
      this.getData();
      this.getData2();
      this.getServer();
      let token = helper.getToken();
      this.help_url = this.$api_url.server+"/buyer/help/get_row?api_token="+token+"&id=34";
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  body{
    background-color: transparent;
  }
  #app{
    margin-top:0;
  }
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1.2rem;
  }
  .row-img{
    width:50px;
    height:50px;
    border:thin dashed #ccc;
    padding:0.2rem;
    border-radius: 0.11rem;
    margin-right:0.5rem;
    margin-bottom:0.5rem;
  }
  .img-review{
    padding: 1rem;
  }
  .img-review img{
    max-height:10rem;
    max-width:16rem;
  }
  .bind-info{
    text-align: left;
    padding: 1rem;
    position: relative;
    color:#333;
    font-size: 0.5rem;
  }
  .bind-info .bg{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*background-image: url("/static/img/bind_bg.jpeg");*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #fff;
    -webkit-filter: blur(25px);
    filter: blur(15px);
    z-index: -2;
  }
  .bind-info img{
    height:3rem;
    width:3rem;
    border-radius: 50%;
    margin-bottom:0.5rem;
  }
  .stat-info ul{
    overflow: hidden;
    margin-top:0.7rem;
  }
  .stat-info ul li{
    float:left;
    width:33%;
    text-align: left;
    text-align: center;
  }
  .refresh{
    float:right;
  }
  .unbind{
    border: thin dashed #fd6868;
    display: inline-block;
    padding: 0.2rem 0.8rem;
    color: #fd6868;
    border-radius: 0.6rem;
  }
  .verify-fail{
    margin-top:0.2rem;
  }
  .btn{
    font-size: .426667rem;
    line-height: 1.12rem;
    border-radius: .106667rem;
    background-color: #2f3848;
    color: #fff;
    width: 90%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: .666667rem;
  }
  .btn:disabled{
    background: #ccc;
  }
  #btn-qq{
    border-radius: 0.1rem;
    padding: 0.05rem;
    background: #f37676;
    color: #fff;
  }
  .show-qrcode{
    width: 4rem;
    border: thin dashed #ccc;
    border-radius: 0.13rem;
    padding: 0.2rem;
  }
  .img-list .img-item{
    float:left;
  }
  .bind-info-douyin{
    max-width: 90%;
    margin: 0.5rem auto;
    border: thin solid #ccc;
    padding: 0.5rem;
    border-radius: 0.1rem;
    max-height: 14rem;
    box-shadow: 0 0 0.2rem #aaa;
  }
</style>
